import {Avatar, Button, Col, Menu, Row, Space,} from "antd";
import {MenuFoldOutlined} from '@ant-design/icons';
import logo from './img/阿里巴巴字体.svg';

function NavBar() {
    const menu = [
        {label:'预览商城',key:'item-1'},
        {label:'系统配置',key:'item-2'},
        {
            label: (
                <Space>
                    <Avatar src={''}></Avatar>
                    <span>{'黄小米'}</span>
                </Space>
            ),
            key: 'submenu',
            children:[
                {label:'消息通知',key:'submenu-item-1'},
                {label:'账户设置',key:'submenu-item-2'},
                {label:'退出登录',key:'submenu-item-3'},
            ]
        },
    ]


    return (
        <>
            <Row justify='space-between'>
                <Col>
                    <Row justify='space-between'>
                        <Col>
                            <img height='40' src={logo} alt='logo'/>
                        </Col>
                        <Col>
                            <Button style={{color: '#fff'}} icon={<MenuFoldOutlined/>} type='link'></Button>
                        </Col>
                    </Row>
                </Col>
                <Col>
                    <Menu mode='horizontal' items={menu} theme='dark'></Menu>
                </Col>
            </Row>
        </>
    )
}

export default NavBar